<template>
	<div id="notes">
		<v-title 
			:title='title' 
			:text1='text1' 
			:value1='notes.founder' 
			:text2='text2'
			:value2='notes.createtime' 
			:isShow='isShow'>
		</v-title>
		<div class="notes-cont">
			<div class="notes-item">
				<div>查看规则：</div>
				<div v-if="notes.viewnotes == 1">不强制查看</div>
				<div v-else-if="notes.viewnotes == 2">每天强制查看</div>
				<div v-else="notes.viewnotes == 3">每次强制查看</div>
			</div>
			<div class="notes-item">
				<div>须知说明：</div>
				<div>
					<ul>
						<li style="line-height: 1.4;" v-for="(item,index) in contArr" :key="index">{{item}}</li>
					</ul>
				</div>
			</div>
			<div class="notes-item" v-if="notes.fool == false">
				<div>是否使用该须知：</div>
				<div>
					<el-radio v-model="radio" label="1" @change="change">是</el-radio>
					<el-radio v-model="radio" label="2" @change="change">否</el-radio>
				</div>
			</div>
			<div class="notes-item">
				<div></div>
				<div>
					<el-button :disabled = "disabled" 
						v-if="notes.fool == false" 
						:data-id="notes.id" 
						class="custom-btn edit" 
						type="primary" 
						size="medium" 
						@click="enter($event)">确认</el-button>
					<el-button v-else :data-id="notes.id" class="custom-btn edit" type="primary" size="medium" @click="edit($event)">编辑</el-button>
					<el-button class="custom-btn" size="medium" @click="del">删除</el-button>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import vTitle from './view/titleDiv.vue'
	import {notes,deleteNotes,addNotes} from "../api/getData"
	export default {
		name: '',
		inject:['reload'],
		components:{
			vTitle
		},
		data() {
			return {
				title:'预约须知',
				text1:'创建人：',
				value1:'',
				text2:'创建时间：',
				value2:'',
				isShow:false,
				notes:{},
				contArr:[],
				radio: '1',
				disabled:false
			} 
		},
		created() {}, // 创建时
		beforeMount() {}, // 挂载之前
		mounted() {
			this.getNotes()
		}, // 挂载之后
		beforeUpdate() {}, // 数据更新时调用,在渲染之前
		updated() {}, // 数据更新后,渲染后调用(禁止)
		beforeDestroy() {}, // 实例销毁前调用,解绑中间层的数据传输
		destroyed() {}, // 实例销毁后调用
		methods: {
			change(e){
				// console.log(e,this.radio,"radio")
				this.radio = e
			},
			enter(e){
				let notesId = e.target.getAttribute('data-id')
				console.log(this.radio)
				if(this.radio == "1"){
					addNotes({
						'notes': this.notes.notes,
						'viewnotes':this.notes.viewnotes
					}).then((res) =>{
						// console.log(res.data,"新建预约须知成功")
						if(res.data.code == 0 ){
							this.$message({
								message: '使用机构预约须知成功',
								type: 'success'
							});
							this.reload()
						}else{
							this.$message.error(res.data.msg);
						}
					}).catch((error)=>{
						console.log(error,"新建预约须知失败")
					})
				}else if(this.radio === "2"){
					this.$router.push({path:'/notesAdd'})
				}
			},
			// 编辑
			edit(e){
				let notesId = e.target.getAttribute('data-id')
				console.log(notesId)
				this.$router.push({
					path:'/notesEdit',
					query:{
						id:notesId
					}
				})
			},
			// 删除
			del(){
				this.$confirm('请再次确认是否删除?','提示',{
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then(()=>{
					deleteNotes({}).then((res) =>{
						if(res.data.code == 0){
							this.$message({
								type: 'success',
								message: '删除成功!'
							});
							this.getNotes()
							this.$router.push('/notes')
							// this.$router.push({path:'/notesAdd'}),
						}else{
							this.$message.error(res.data.msg)
						}
					}).catch((error) =>{
						console.log(error)
					})
				}).catch(()=>{
					this.$message({
						type: 'info',
						message: '已取消删除'
					});  
				})
			},
			// 获取预约须知信息
			getNotes(){
				notes({}).then((res) =>{
					console.log(res)
					if(res.data.code == 0){
						this.contArr = res.data.data.notes.split("\n")
						this.notes = res.data.data
					}else if(res.data.code == 1){
						this.$router.push({path:'/notesAdd'})
					}
				}).catch((error) =>{
					console.log(error)
				})
			}
		} // 函数
	}
</script>
<style lang='scss'>
	#notes{
		.notes-cont{
			background: #fff;
			margin-top:24px;
			padding: 40px;
			font-size:14px;
			.notes-item{
				display: flex;
				letter-spacing: 1px;
				margin-bottom: 16px;
				div:nth-child(1){
					width: 200px;
					text-align: right;
					color: #000;
				}
				div:nth-child(2){
					/* width: 540px; */
					flex: 1;
					text-align: left;
					color: #808492 ;
					margin-right: 100px;
				}
				.custom-btn{
					width:120px;
					height: 32px;
					line-height: 32px;
					padding: 0;
					margin-top: 20px;
				}
				.edit{
					background: #328EF9;
				}
			}
		}
	}
</style>
